<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8">
<title>报文映射配置</title>

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-table.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/style.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-editable.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/buttons.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/custom-style.css">

<style>.no-close .ui-dialog-titlebar-close {
	display: none;
}</style>

</head>

<body>
	<div th:insert="~{header :: copy}"></div>

	<div class="panel panel-default"
		style="padding-top: 80px; margin-left: 50px; margin-right: 50px; border: 0px">
		<div class="panel-heading" style="background: white;">
			<font size="5px">报文映射配置</font>
		</div>

		<div id="panel_body" class="panel-body">

			<div id="toolbar" class="btn-group">
				<button id="btn_add" type="button" class="btn btn-default"
						data-toggle="modal" data-target="#addModel">
					<span class="glyphicon glyphicon-plus" aria-hidden="true">编辑映射</span>

				</button>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<span>请选择接口</span><select id="select_interface"></select>
			</div>
			<table id="table"></table>
		</div>
	</div>
	</div>
			<div id="dialog" title="数据整理" style="display:none">

				<div></div>

				<div>
					<ul>
						<table width="100%" border="0" cellpadding="0" cellspacing="0"
							   style="background:#f1f1f1;border-top:1px solid #ddd;border-bottom: 1px solid #ddd;height:26px;">
							<tr>
								<th>输出报文字段<span style="font-size:12px;color:red;font-weight:400">(*必填)</span>
								</th>
							</tr>
						</table>

						<div id="left_table" style="border-bottom:1px solid #ddd">
							<table id="msg_out_table" width="100%" border="0" cellpadding="0" cellspacing="0">

							</table>
						</div>
					</ul>
					<ul>
						<table width="100%" border="0" cellpadding="0" cellspacing="0"
							   style="background:#f1f1f1;border-top:1px solid #ddd;height:26px;">
							<tr>
								<th>数据映射<span style="font-size:12px;color:red;font-weight:400">(上传数据字段)</span>
								</th>
							</tr>
						</table>

						<div id="right_table">

						</div>
					</ul>
					<ul style="">
						<table id="msg_in_conf" width="100%" border="0" cellpadding="0" cellspacing="0"
							   style="background:#f1f1f1;border-top:1px solid #ddd;height:26px;">
							<tr>
								<th>输入报文字段</th>
							</tr>
						</table>
						<div id="modules" >

						</div>
					</ul>

					<div style="text-align:center;clear: both;padding:15px 0">
						<button class="btn btn-xs up-button" id="dialog_exit"
								style="margin-right:15px;color:#fff">
							<i class='glyphicon glyphicon-remove'></i> 取消
						</button>
						<button class="btn btn-xs up-button" id="dialog_ok" style="margin-left:15px;color:#fff">
							<i class='glyphicon glyphicon-ok'></i> 核查数据
						</button>
					</div>
				</div>
			</div>

	<script src="bootstrap/js/jquery.min.js"></script>
	<script src="bootstrap/js/jquery-ui.min.js"></script>
	<script src="bootstrap/js/bootstrap.js"></script>
	<script src="bootstrap/js/bootstrap-table.js"></script>
	<script src="bootstrap/js/bootstrap-editable.min.js"></script>
	<script src="bootstrap/js/bootstrap-table-editable.js"></script>
	<script src="bootstrap/js/gateway.js"></script>
	<script type="text/javascript">

		$(function() {
			$.ajax({
				url:"/msgMapping/listAllInterfaceId",
				dataType:'json',
				success:function (data) {
					//console.log(data);
					for(var i=0;i<data.length;i++){
						$('#select_interface').append("<option value='"+data[i].id+"'>"+data[i].id+"</option>");
					}

				}
			})

			var modules = document.getElementById('modules');

			var left_table=document.getElementById('left_table');
			var right_table=document.getElementById('right_table');

			left_table.onscroll = function() {
				right_table.scrollTop = this.scrollTop;
			};

			right_table.onscroll = function() {
				left_table.scrollTop = this.scrollTop;
			};

			$('.drag').draggable({
				appendTo : 'body',
				helper : 'clone'
			});
			$('#btn_add').click(function () {
				$('#right_table').html("")
				$.ajax({
					url:"/msgMapping/getMsgOutConf",
					data:{apiId:$('#select_interface').val()},
					dataType:"json",
					success:function (msg_out_data) {
						//console.log(msg_out_data)

						var paramNode = '';
						var mappingNode = '';
						for(var i= 0;i<msg_out_data.length;i++){
							paramNode += '<tr><td>'+msg_out_data[i].paramName+'</td></tr>';
							$('#right_table').append('<div class="right_table"><ol class="drop-item" ><li id="255"></li></ol></div>');
						}
						$('#msg_out_table').html(paramNode);


						$('.right_table').droppable({
							activeClass: 'active',
							hoverClass: 'hover',
							accept: ":not(.ui-sortable-helper)", // Reject clones generated by sortable
							drop: function (e, ui) {
								/*if($(this).html()!=''){
                                    alert('已经存在字段');
                                    return false;
                                }*/

								$(this).empty();

								var className="el"+Math.floor(Math.random()*999999999999);
								for(var i = 0;i<ui.draggable.length;i++){
									$(ui.draggable[i]).addClass(className).hide();
								}

								var $el = $('<ol class="drop-item">'+ui.draggable.html()+'</ol>');
								$el.append($('<li tag="'+className+'" class="btn btn-default btn-xs remove"><span class="glyphicon glyphicon-trash"></span></li>').click(function () {

											$(this).parent().parent().append('<ol class="drop-item"><li id="255" ></li></ol>');
											$(this).parent().detach();
											//$(this).parent().parent().empty();
											$("."+className).removeClass(className).show();
										})
								);

								$(this).append($el);

								$('.drop-item li').removeClass('btn');
							}
						})

					}
				})

				$.ajax({
					url:"/msgMapping/getMsgInConf",
					data : {apiId:$('#select_interface').val()},
					dataType :"json",
					success : function (res_data) {
						//console.log(res_data)
						for ( var i = 0; i < res_data.length; i++) {
							var modules_p = document.createElement('p');
							modules_p.innerHTML = '<li id='+res_data[i].id+'>' + res_data[i].paramName + '</li>';
							modules_p.className = 'drag';

							/* if (grid_tr_td[i].innerHTML == '') {
                                modules_p.style.display = 'none';
                            } */

							/* if(grid_tr_td[i].innerHTML == 'XXXX'){
                                modules_p.addClass("background-color","yellow");
                            } */

							modules.appendChild(modules_p);
						};
						$('.drag').draggable({
							appendTo : 'body',
							helper : 'clone'
						});
					}
				})


				$('#dialog').dialog({
					dialogClass: "no-close",
					width:645,
					height:555,
					closable : false,
					resizable :false
				});
			})

		})
		$('#dialog_exit').click(function(){
			$("#dialog").dialog('close');
			$("#modules").empty();

		});

		var id_arr = "";



		$('#dialog_ok').click(function() {
			var resMapping = new Array();
			$('#right_table').find("li").each(function () {
				//console.log(this.innerHTML);

					resMapping.push(this.innerHTML);

			})
			//console.log(resMapping)
			$.ajax({
				url:"/msgMapping/saveOrEditMsgMappingList",
				data : {mappingList:JSON.stringify(resMapping),apiId:$('#select_interface').val()},
				dataType :"json",
				success:function (resdata) {
					//console.log(resdata);
					$("#dialog").dialog('close');
					$("#modules").empty();
					Swal({
						title: '配置映射成功',
						type:"success"
					});
				},
				error:function (resdata) {
					Swal({
						title: '配置映射失败' + resdata.message,
						type:"error"
					});
				}
			})


		});

		$('#table').bootstrapTable({
			url : '/msgMapping/listAll',
			pagination : true,
			pageSize : 10,
			pageNumber : 1,
			search : true,
			searchAlign : "right",
			toolbar : "#toolbar",
			columns : [
				{
					field : 'id',
					title : 'id',
				},{
					field : 'interfaceId',
					title : '接口',
				},{
					field : 'inMsgId',
					title : '输入报文参数ID',
				},{
					field : 'inMsgParamName',
					title : '输入报文参数',
				},{
					field : 'outMsgId',
					title : '输出报文参数ID',
				},{
					field : 'outMsgParamName',
					title : '输出报文参数',
				},{
					field : 'isActivated',
					title : '是否激活',
				},{
					field : 'createTime',
					title : '创建时间',
				},{
					field : 'updateTime',
					title : '更新时间',
				}
			]
		});



		$(function(){
			$('#left_table table tbody tr td:last').css('border','0');
		})
	</script>
	<script>
		$(function() {
			var bottom_iframe = document.getElementById('bottom_iframe');
			var panel_body = document.getElementById('panel_body');
			bottom_iframe.onscroll = function() {
				panel_body.scrollLeft = this.scrollLeft;
			}
		})
	</script>

</body>

</html>